<template>
    <div class="vnextTick">
        <h2>Vue.nextTick</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            主要用于在当DOM发生变化后并对DOM进行操作。<br>
            获取DOM变化后的数据，或在DOM变化完成后进行的操作。<br>
            这跟Vue的渲染原理有关系。<br>
            以下面的Demo为例。<br>
            当num数值在点击后，发生了变化，
            但是DOM结构中的数值，还没有被重新渲染。因此，这时候通过dom去获取num的值，仍然是原始值。<br>
            而nextTick的作用就在于，它是异步的，<br>
            当dom结构发生变化时，nextTick中的操作，会进行等待。<br>
            在dom结构被重新渲染为新的DOM时，才会执行nextTick中的回调函数。<br>
            因此，通过nextTick获取到的值，就会是最新的值。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo
        </el-tag>
        <div class="cont">
            <h3 id="num">{{num}}</h3>
            <el-button type="danger" @click="noNextTick">不使用nextTick</el-button>
            <el-button type="success" @click="haveNextTick">使用nextTick</el-button>
        </div>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'VnextTick',
    mixins: [mixinPage],
    data() {
        return {
            num: 1
        }
    },
    methods: {
        noNextTick() {
            this.num = 2;
            alert('通过dom获取的数据: ' + document.querySelector('#num').innerHTML + '; 当前实际num: ' + this.num);
        },
        haveNextTick() {
            this.num = 3;
            this.$nextTick(function() {
                alert('通过dom获取的数据: ' + document.querySelector('#num').innerHTML + '; 当前实际num: ' + this.num);
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
h3 {
    margin-left: 136px;
    padding: 10px 0;
}
</style>